<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:400px;float:left"></div>
<div id="main1" style="width:800px;height:400px;float:left"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      var area = [{% for item in area %}'{{ item }}',{% endfor %}];
      var value = [{% for item in value %}{{ item }},{% endfor %}];

      // 指定图表的配置项和数据
     option = {
          title: {
            text: '房源数量占比排名前10省份饼图',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '房源数量占比',
              type: 'pie',
              radius: '50%',
              data: [
                { value: value[0], name: area[0] },
                { value: value[1], name: area[1] },
                { value: value[2], name: area[2] },
                { value: value[3], name: area[3] },
                { value: value[4], name: area[4] },
                { value: value[5], name: area[5] },
                { value: value[6], name: area[6] },
                { value: value[7], name: area[7] },
                { value: value[8], name: area[8] },
                { value: value[9], name: area[9] },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
</script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main1'));

    var areas = [{% for item in areas %}'{{ item }}',{% endfor %}];
    var now = [{% for item in now %}{{ item }}, {% endfor %}];
    var all = [{% for item in all %}{{ item }}, {% endfor %}];
    var add = [{% for item in add %}{{ item }}, {% endfor %}];

    var well = [{% for item in well %}{{ item }}, {% endfor %}];
    var died = [{% for item in died %}{{ item }}, {% endfor %}];

    // 指定图表的配置项和数据
    option = {
      title: {
        text: '房源数量占比排名前10省份玫瑰饼图',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        left: 'center',
        top: 'bottom',
      },
      series: [
        {
          name: '死亡',
          type: 'pie',
          radius: [20, 140],
          center: ['25%', '50%'],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 5
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true
            }
          },
          data:(function () {
                    var res = []
                    for (var i = 0; i < 10; i++) {
                        res.push({value: value[i], name: area[i]});
                    }
                    return res;
                })(),
        },
        {
          name: '治愈',
          type: 'pie',
          radius: [20, 140],
          center: ['75%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 5
          },
          data: [
           { value: value[0], name: area[0] },
            { value: value[1], name: area[1] },
            { value: value[2], name: area[2] },
            { value: value[3], name: area[3] },
            { value: value[4], name: area[4] },
            { value: value[5], name: area[5] },
            { value: value[6], name: area[6] },
            { value: value[7], name: area[7] },
            { value: value[8], name: area[8] },
            { value: value[9], name: area[9] },
          ]
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
<!--          data: [-->
<!--           { value: value[0], name: area[0] },-->
<!--                { value: value[1], name: area[1] },-->
<!--                { value: value[2], name: area[2] },-->
<!--                { value: value[3], name: area[3] },-->
<!--                { value: value[4], name: area[4] },-->
<!--                { value: value[5], name: area[5] },-->
<!--                { value: value[6], name: area[6] },-->
<!--                { value: value[7], name: area[7] },-->
<!--                { value: value[8], name: area[8] },-->
<!--                { value: value[9], name: area[9] },-->
<!--          ]-->